<template>
  <!-- vue3可以有多个根节点 -->
  <!-- typeof countRef 是 number -->
  <h1>count:{{ countRef }}</h1> 
  <h1>count:{{ typeof countRef }}</h1>
  <h1>count:{{ count }}</h1>
  <p>
    <button @click="decrease">decrease</button>

    <!-- 在这这么写也不行，不具有响应式 -->
    <button @click="count++">decrease</button>
    <button @click="increase">increase</button>
  </p>
</template>

<script>
import { ref } from "vue";

function useCount() { // 习惯使用向react的hook一样的命名useCount，表示要用一个count的数据，以及它的方法定义也要用
  // vue官方建议加一个后缀，不要写晕了
  let countRef = ref(0); // 这是一个响应式的数据，默认为0
  console.log(countRef); // 里面的value是一个访问器，访问值的时候把值给你，设置的的时候会发出通知


  let count = 0; // 这是一个普通的变量，不具有响应式
  const increase = () => {
    count++; // 普通的变量增加，没有响应式，如果是this.count++还好理解一点
    countRef.value++; // 每次都要.value，不过这是没有办法的事情，处理方式的问题，react的hooks没有这个问题，但是他有他自己的问题
  };
  const decrease = () => {
    countRef.value--;
  };
  return {
    count,
    countRef,
    increase,
    decrease,
  };
}

// let countRef = ref(0); // 还可以直接定义，不用函数包裹，缺点是数据耦合，就相当于一个简单的仓库

export default {
  setup() { // setup函数是composition api的其中一个，为了满足setup函数实现功能，还提供了一些额外的api
    // console.log("所有生命周期钩子函数之前调用，在组件的属性赋值之后立即调用，只会执行一次");
    // console.log(this); // this -> undefined，这里面是不能使用this的，他有更好的方式进行处理

    // 在setup中，很多时候没有必要去得到组件实例，至少不可以通过this得到，能得到组件实例吗，好像有api可以得到

    // setup中，count是一个对象
    // 实例代理中（就是模板访问count的时候），count是一个count.value


    // 可以做到一块一块的，比如：(个人感觉还不如vue2的写法方便，但是setup可以做到更多，比如拆分，写混入，使用setup的script等等，组件内容越多，优势越明显)
    //1. 新增

    //2. 修改

    //3. 删除
    return { // 返回的对象的所有属性会被附着到组件实例
      ...useCount(),
    };
  },

  // vue3大部分还是兼容之前vue2的写法的，就是使用配置来进行书写
  // data() {
  //   return {
  //     count: 0,
  //   }
  // },
  // methods: {
    // increase() {
    //   console.log(this); // this指向的是一个代理，代理的对象有点像之前的组件实例
    //   this.count++;
    // },
  // }
};
</script>

